<template>
  <div style="width: 100%;height: 100%">
    <vue-echarts :option="option"/>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import cloneDeep from 'lodash/cloneDeep'
import hunanMapData from '@/assets/hunan.json'

export default {
  name: 'JiangsuMapWarning',
  setup () {
    const option = ref({})
    let timer = null
    const update = () => {
      fetch('http://www.youbaobao.xyz/datav-res/datav/jiangsuMapData.json')
        .then(response => response.json())
        .then(data => {
          const center = []
          hunanMapData.features.forEach(item => {
            if (item.properties) {
              center.push({
                key: item.properties.name,
                value: item.properties.center
              })
            }
          })
          echarts.registerMap('hunan', hunanMapData) // 注册地图
          option.value = {
            visualMap: {
              show: true,
              min: 0,
              max: 100,
              seriesIndex: [0],
              inRange: {
                color: ['#a5dcf4', '#006edd']
              }
            },
            geo: [{
              map: 'hunan', // 使用自定义地图
              zoom: 1, // 默认显示级别
              roam: false, // 启动鼠标滚轮地图缩放
              scaleLimit: {
                min: 0,
                max: 3
              }, // 控制最大和最小缩放比例
              itemStyle: {
                areaColor: '#013c62',
                shadowColor: '#013c62',
                shadowOffsetX: -5,
                shadowOffsetY: 15,
                shadowBlur: 20
              }
            }],
            series: [
              {
                type: 'map',
                map: 'hunan',
                zoom: 1,
                roam: false,
                label: {
                  show: true,
                  color: '#fff'
                },
                emphasis: {
                  label: {
                    color: '#FFF'
                  },
                  itemStyle: {
                    areaColor: 'orange',
                    borderWidth: 0
                  }
                },
                itemStyle: {
                  borderColor: '#2980b9',
                  borderWidth: 1,
                  areaColor: '#12235c'
                },
                data: center.map(centerItem => {
                  const value = Math.random() * 100 // 人口数(单位:万)
                  return {
                    name: centerItem.key,
                    value
                  }
                })
              },
              {
                type: 'effectScatter',
                data: [],
                coordinateSystem: 'geo',
                symbolSize: 14,
                itemStyle: {
                  color: '#feae21'
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    return `{title|${params.data.city}}\n{content|发生 xx 事件}`
                  },
                  backgroundColor: 'rgba(254,174,33,.8)',
                  padding: [0, 0],
                  borderRadius: 3,
                  lineHeight: 32,
                  color: '#f7fafb',
                  rich: {
                    title: {
                      padding: [0, 10],
                      color: '#fff'
                    },
                    content: {
                      padding: [0, 10],
                      color: '#fff'
                    }
                  }
                },
                emphasis: {
                  show: true
                }
              },
              {
                type: 'effectScatter',
                data: [],
                coordinateSystem: 'geo',
                symbolSize: 14,
                itemStyle: {
                  color: '#feae21'
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    return `{title|${params.data.city}}\n{content|发生 xx 事件}`
                  },
                  backgroundColor: 'rgba(233,63,66,.9)',
                  padding: [0, 0],
                  borderRadius: 3,
                  lineHeight: 32,
                  color: '#fff',
                  rich: {
                    title: {
                      padding: [0, 10],
                      color: '#fff'
                    },
                    content: {
                      padding: [0, 10],
                      color: '#fff'
                    }
                  }
                },
                emphasis: {
                  show: true
                }
              },
              {
                type: 'effectScatter',
                data: [],
                coordinateSystem: 'geo',
                symbolSize: 14,
                itemStyle: {
                  color: '#08baec'
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    return `{title|${params.data.city}}\n{content|发生 xx 事件}`
                  },
                  backgroundColor: 'rgba(8,186,236,.9)',
                  padding: [0, 0],
                  borderRadius: 3,
                  lineHeight: 32,
                  color: '#fff',
                  rich: {
                    title: {
                      padding: [0, 10],
                      color: '#fff'
                    },
                    content: {
                      padding: [0, 10],
                      color: '#fff'
                    }
                  }
                },
                emphasis: {
                  show: true
                }
              }
            ]
          }

          // 测试 随机展示事件信息
          timer = setInterval(() => {
            const _option = cloneDeep(option.value)
            // 初始化数据
            for (let i = 1; i < 4; i++) {
              _option.series[i].data = []
            }
            // 生成城市随机数
            const cityLength = center.length
            const cityIndex = Math.floor(Math.random() * cityLength)
            const eventIndex = Math.floor(Math.random() * 3) + 1
            _option.series[eventIndex].data = [{
              city: center[cityIndex].key,
              value: center[cityIndex].value
            }]
            option.value = _option
          }, 2000)
        })
    }

    onMounted(update)

    onUnmounted(() => timer && clearInterval(timer))

    return {
      option
    }
  }
}
</script>

<style scoped>

</style>
